<template>
    <div class='app-content customer-registration registration-success'>
        <div class="success-state">
            <div class="icon">
                <i class="iconfont icon-duigou"></i>
            </div>
            <div class="text">
                <div class="status">登记成功</div>
                <div class="state">
                    <span class="num">第10组访客</span>
                    <span class="date">2021-10-22</span>
                </div>
            </div>
        </div>
        <div class="app-view">
            <van-cell-group>
                <van-field 
                    v-model="form.name"
                    label-width="1.9rem" 
                    label="客户姓名" 
                    placeholder="客户姓名"
                    readonly
                >
                    <template #left-icon>
                        <i class="iconfont icon-yonghu"></i>
                    </template>
                </van-field>
                <van-field 
                    v-model="form.num"
                    label-width="1.9rem" 
                    label="电话号码" 
                    placeholder="电话号码"
                    readonly
                >
                    <template #left-icon>
                        <i class="iconfont icon-shouji"></i>
                    </template>
                </van-field>
            </van-cell-group>
        </div>
        <div class="app-view">
            <div class="adviser-info">
                <avatar class="avatar"></avatar>
                <div class="con">
                    <div class="name">接待顾问：吴瑞丽</div>
                    <div class="sub">排班模式</div>
                </div>
            </div>
        </div>
        <div class="button-group">
            <van-button type="primary" round @click="goHome">返回首页</van-button>
            <van-button type="primary" round @click="goOn">继续登记</van-button>
        </div>
    </div>
</template>

<script>
import avatar from "@/components/Avatar/index.vue"
export default {
    name: '',
    data() { 
        return {
            form:{}
        }
    },
    props: {

    },
    components:{
        avatar
    },
    mounted() {

    },
    methods:{
        goHome(){
            this.$router.replace({
                path:"/index"
            })
        },
        goOn(){
            this.$router.go(-1);
        }
    },
}
</script>

<style lang='scss' scoped>
.registration-success{
    margin-top:1.5rem;
    .adviser-info{
        padding:0.6rem 0.5rem;
        display:flex;
        align-items: center;
        .avatar{
            width:1.75rem;
            height:1.75rem;
        }
        .con{
            margin-left:0.5rem;
            line-height: 1;
            .name{
                font-size:0.4rem;
            }
            .sub{
                font-size:0.34rem;
                color:#999;
                margin-top:0.3rem;
            }
        }
    }
    .button-group{
        display:flex;
        align-items: center;
        margin-top:0.5rem;
        .van-button{
            flex:1;
            height:1.3rem;
            font-size:0.4rem;
        }
        .van-button+.van-button{
            margin-left:0.8rem;
        }
    }
}
.success-state{
    display:flex;
    align-items: center;
    justify-content: center;
    margin-bottom:0.8rem;
    .icon{
        width:1.35rem;
        height:1.35rem;
        border-radius: 100%;
        position:relative;
        margin-right:0.5rem;
        .iconfont{
            font-size:0.9rem;
            position:absolute;
            top:0.2rem;
            right:0;
        }
    }
    .text{
        line-height: 1;
        .status{
            font-size:0.54rem;
        }
        .state{
            font-size:0.34rem;
            margin-top:0.3rem;
            .date{
                margin-left:0.25rem;
            }
        }
    }
}
</style>